<template>
    <el-dialog v-model="visible" :title="!dataForm.id ? $t('add') : $t('update')" :close-on-click-modal="false"
        :close-on-press-escape="false">
        <el-form :model="dataForm" :rules="rules" ref="dataFormRef" @keyup.enter="dataFormSubmitHandle()"
            label-width="120px" label-position="top">
            <el-row>
                <el-col :span="11"><el-form-item prop="name" :label="$t('dishes.name')" required>
                        <el-input v-model="dataForm.name" :placeholder="$t('input')"></el-input>
                    </el-form-item></el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="code" :label="$t('dishes.code')" required>
                        <el-input v-model="dataForm.code" :placeholder="$t('input')"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item prop="categoryName" :label="$t('dishes.category')" class="dept-list" required>
                        <el-popover :width="400" ref="categoryListPopover" placement="bottom-start" trigger="click"
                            popper-class="popover-pop">
                            <template v-slot:reference>
                                <el-input v-model="dataForm.categoryName" :readonly="true"
                                    :placeholder="$t('choose')">
                                </el-input></template>
                            <div class="popover-pop-body"><el-tree :data="categoryList"
                                    :props="{ label: 'name', children: 'children' }" node-key="id" ref="categoryListTree"
                                    :highlight-current="true" :expand-on-click-node="false" accordion
                                    @current-change="categoryListTreeCurrentChangeHandle"> </el-tree></div>
                        </el-popover>
                    </el-form-item>

                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="cooking" :label="$t('dishes.cooking')" required>
                        <el-select v-model="dataForm.cooking" :placeholder="$t('choose')">
                            <el-option key="1" :label="$t('teacher.healthCertificate1')" :value="1"></el-option>
                            <el-option key="0" :label="$t('teacher.healthCertificate0')" :value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">

                </el-col>
                <el-col :span="11" :offset="1"></el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item prop="remark" :label="$t('dishes.remark')">
                        <el-input type="textarea" :placeholder="$t('input')" v-model="dataForm.remark"
                            maxlength="30" show-word-limit>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11" :offset="1">
                    <el-form-item prop="picture" :label="$t('dishes.picture')">
                        <el-upload class="picture-uploader" action="https://jsonplaceholder.typicode.com/posts/"
                            :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                            <i class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                </el-col>
            </el-row>


            <el-row>
                <el-col :span="24">
                    <div style="padding: 0 0 10px;font-weight: bold;color: #000000;">{{ $t('dishes.food') }}</div>
                    <!-- <el-form-item prop="food" :label="$t('dishes.food')"> -->
                    <el-row v-for="(item, index) in dataForm.foods" :key="index" style="padding-top: 10px;">
                        <el-col :span="3">
                            <div style="line-height: 30px;font-weight: bold;color: #000000;">{{ $t('dishes.food') }}{{ index + 1 }}</div>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="item.food" :placeholder="$t('dishes.food')">
                                <el-option key="1" :label="$t('teacher.healthCertificate1')" :value="1"></el-option>
                                <el-option key="0" :label="$t('teacher.healthCertificate0')" :value="0"></el-option>
                            </el-select>
                        </el-col>
                        
                        <el-col :span="4" :offset="1">
                            <el-input v-model="item.used" :placeholder="$t('dishes.used')"></el-input>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-select v-model="item.main" :placeholder="$t('dishes.main')">
                                <el-option key="1" :label="$t('teacher.healthCertificate1')" :value="1"></el-option>
                                <el-option key="0" :label="$t('teacher.healthCertificate0')" :value="0"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-button type="danger" icon="el-icon-minus" @click="foodDel(index)"></el-button>
                            <el-button type="primary" icon="el-icon-plus" @click="foodAdd" v-show="index===0"></el-button>
                        </el-col>
                    </el-row>
                    <!-- </el-form-item> -->
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <div style="padding: 16px 0 10px;font-weight: bold;color: #000000;">{{ $t('dishes.spices') }}</div>
                    <!-- <el-form-item prop="food" :label="$t('dishes.spices')"> -->
                    <el-row v-for="(item, index) in dataForm.spices" :key="index" style="padding-top: 10px;">
                        <el-col :span="3">
                            <div style="line-height: 30px;font-weight: bold;color: #000000;">{{ $t('dishes.spices') }}{{ index + 1 }}</div>
                        </el-col>
                        <el-col :span="5">
                            <el-select v-model="item.spice" :placeholder="$t('dishes.spices')">
                                <el-option key="1" :label="$t('teacher.healthCertificate1')" :value="1"></el-option>
                                <el-option key="0" :label="$t('teacher.healthCertificate0')" :value="0"></el-option>
                            </el-select>
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-input v-model="item.used" :placeholder="$t('dishes.used')"></el-input>
                        </el-col>
                        <el-col :span="4" :offset="1">
                        </el-col>
                        <el-col :span="4" :offset="1">
                            <el-button type="danger" icon="el-icon-minus" @click="spicesDel(index)"></el-button>
                            <el-button type="primary" icon="el-icon-plus" @click="spicesAdd" v-show="index===0"></el-button>
                        </el-col>
                    </el-row>
                    <!-- </el-form-item> -->
                </el-col>
            </el-row>
        </el-form>
        <template v-slot:footer>
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
            <el-button type="primary" @click="dataFormSubmitHandle()">{{ $t('confirm') }}</el-button>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue';
import baseService from '@/service/baseService';
import { useI18n } from "vue-i18n";
import { IObject } from '@/types/interface';

const { t } = useI18n();
const visible = ref(false);
const dataFormRef = ref();
const categoryList = ref([]);
const dataForm = reactive({
    id: "",
    name: "",
    code: "",
    categoryId: "",
    categoryName: "",
    cooking: "",
    foods: <IObject[]>[{}],
    spices: <IObject[]>[{}],
    remark: "",
    used: "",
    sort: 0,
})

const rules = ref({
    name: [{ required: true, message: t("validate.required"), trigger: "blur" }],
    categoryName: [{ required: true, message: t("validate.required"), trigger: "change" }],
    cooking: [{ required: true, message: t("validate.required"), trigger: "change" }],
});

const init = (id?: number) => {
    visible.value = true;
    dataForm.id = "";
    // 重置表单数据
    if (dataFormRef.value) {
        dataFormRef.value.resetFields();
    }
    if (id) {
        getInfo(id)
    }
};

const handleAvatarSuccess = () => {

};

const beforeAvatarUpload = () => {

};

const getInfo = (id: number) => {
    baseService.get(`${id}`).then((res) => {
        Object.assign(dataForm, res.data)
    })
}
const categoryListPopover = ref()

// 菜品分类, 选中
const categoryListTreeCurrentChangeHandle = (data: IObject) => {
    dataForm.categoryId = data.id;
    dataForm.categoryName = data.name;
    categoryListPopover.value.hide();
};

// 新增食材
const foodAdd = () => {
    console.log(1)
    dataForm.foods.push({})
};
// 删除食材
const foodDel = (i: number) => {
    console.log(2)
    dataForm.foods.splice(i, 1)
};

// 新增调料
const spicesAdd = () => {
    console.log(1)
    dataForm.spices.push({})
};
// 删除食材
const spicesDel = (i: number) => {
    console.log(2)
    dataForm.spices.splice(i, 1)
};

// 表单提交
const dataFormSubmitHandle = () => { }

defineExpose({
    init
})
</script>